/**
 * 推荐榜单
 */
import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import RecommendHeader from '../../c-component/recomend-header'
import { actionCreators } from '../../store'
import HotLeaderboardItem from './c-page/hot-leaderboard-item'
import { HotLeaderboardWrapper } from './style'

export default memo(function HotLeaderboard() {

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(actionCreators.getHotLeaderboardAction(0));
        dispatch(actionCreators.getHotLeaderboardAction(2));
        dispatch(actionCreators.getHotLeaderboardAction(3));
    }, [dispatch]);

    const { hotNewSongList, hotSoaringList, hotOriginalList } = useSelector(state => ({
        hotNewSongList: state.get("recommond").get("hotNewSongList"),
        hotSoaringList: state.get("recommond").get("hotSoaringList"),
        hotOriginalList: state.get("recommond").get("hotOriginalList")
    }));

    return (
        <HotLeaderboardWrapper>
            <RecommendHeader title="榜单"
                mainLink="/discover/leaderboard"
                moreLink="/discover/leaderboard"
            ></RecommendHeader>

            <div className="hot-leaderboard-content recommend_hot_leaderboard">
                <HotLeaderboardItem {...hotSoaringList}/>
                <HotLeaderboardItem {...hotNewSongList}/>
                <HotLeaderboardItem {...hotOriginalList}/>
            </div>
        </HotLeaderboardWrapper>
    )
})
